[자바스크립트] input 태그 placeholder 프로퍼티

자바스크립트를 사용하여 input 태그의 placeholder 값을 가져오거나 변경 가능한 프로퍼티 placeholder에 대하여 알아봅니다.

placeholder



자바스크립트 프로퍼티 placeholder는 input 태그에 사용하여 적용된 placeholder의 값을 변경하거나 가져올 수 있습니다. 그럼 사용 방법 및 간단한 예제를 아래에서 알아보겠습니다.

! placeholder 값 가져오기

먼저 placeholder의 값을 가져오는 방법입니다. input 태그를 inputEle라는 변수에 저장하고 해당 엘리먼트에 DOM 프로퍼티 placeholder를 사용하여 값을 출력하는 예제입니다.
위와 같은 태그가 존재하는 경우 아래처럼 값을 가져옵니다.


출력하면 아래와 같이 나타납니다.

! placeholder 값 변경하기

이번에는 값을 변경하는 경우를 알아봅니다. "테스트 중입니다."로  변경 할 경우 아래와 같이 수행합니다.

이처럼 placeholder를 사용하여 값을 변경하는 것이 가능합니다.

# 참고사항

placeholder의 값은 input 태그의 placeholder 어트로뷰트를 수정하는 것과 동일하게 동작합니다. 값을 가져오거나 변경하는 방법으로 아래의 프로퍼티를 사용할 수 있습니다.

! 브라우저 호환

대부분의 브라우저에서 호환되며 IE의 경우 IE 10 이상 부터 사용이 가능합니다.